<template>
  <div ref="bar" class="echarts"></div>
</template>

<script>
export default {
  props: {
    dataObj: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      max: 0, // dataObj 中的最大值
      maxArr: [],
      total12: [],
      total123: [],
    }
  },
  mounted() {
    this.total12 = this.getTotal12()
    this.total123 = this.getTotal123()
    console.log('RRRRRR', this.total23)
    console.log('RRRRRR', this.total123)
    // this.max = Math.max(...this.dataObj.yData)
    // this.maxArr.length = this.dataObj.yData.length
    // this.maxArr.fill(Math.ceil(this.max * 1.2))
    this.getBar()  // 立体柱状图
  },
  methods: {
    getTotal12() {
      let total = []
      this.dataObj.yData1Obj.yData.forEach((item, index) => {
        total.push(item + this.dataObj.yData2Obj.yData[index])
      })
      return total
    },
    getTotal123() {
      let total = []
      this.dataObj.yData3Obj.yData.forEach((item, index) => {
        total.push(item + this.total12[index])
      })
      return total
    },
    getBar() {
      var echarts = require('echarts');
      var myChart = echarts.init(this.$refs.bar);
      var option = {}
      const offsetX = this.dataObj.offset.offsetX;
      const offsetY = this.dataObj.offset.offsetY;
      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y]; // 右上角
          const c1 = [shape.x - offsetX, shape.y - offsetY]; // 左上角
          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]; // 左下角
          const c3 = [xAxisPoint[0], xAxisPoint[1]]; // 右下角
          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
        }
      })
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y]; // 右上角
          const c2 = [xAxisPoint[0], xAxisPoint[1]]; // 左上角
          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]; // 左下角
          const c4 = [shape.x + offsetX, shape.y - offsetY]; // 右下角
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        }
      })
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: { x: 0, y: 0, },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + offsetX, shape.y - offsetY];
          const c3 = [shape.x, shape.y - offsetX + 2];
          const c4 = [shape.x - offsetX, shape.y - offsetY];
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        }
      })
      // 注册三个面图形
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)

      let dataObj = this.dataObj

      option = {
        backgroundColor: 'rgba(17, 42, 62, 1)',
        grid: { left: 30, right: 30, top: 40, bottom: 70, containLabel: true },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          formatter: function (params, ticket, callback) {
            return `
                    <div style="background: #eee; padding: 10px; border-radius: 5px;">
                      <div>${params[0].name}</div>
                      ${params[0].seriesName} -- ${dataObj.yData1Obj.yData[params[0].dataIndex]} 万元
                      <br />
                      ${params[1].seriesName} -- ${dataObj.yData2Obj.yData[params[1].dataIndex]} 万元
                      <br />
                      ${params[2].seriesName} -- ${dataObj.yData3Obj.yData[params[2].dataIndex]} 万元
                    </div>
            `
          }
        },
        legend: {
          data: this.dataObj.legend,
          left: 'center',
          bottom: '3%',
          itemGap: 100,
          textStyle: { color: '#eee', fontSize: 18, },
        },

        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
          axisLine: {
            show: true,
            lineStyle: { color: 'white' }
          },
          offset: 15,
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: { color: '#7DFFFD' }
          },
          axisLabel: { show: true, fontSize: 18 },
        },
        yAxis: {
          min: 0,
          max: 50,
          // max: Math.ceil(Math.ceil(this.max * 1.4) / 10) * 10,
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: { color: 'white' }
          },
          splitLine: {
            show: true,
            lineStyle: { type: "dashed", color: "rgba(255,255,255,0.1)" },
          },
          axisTick: { show: false },
          axisLabel: { show: true, fontSize: 18, },
          boundaryGap: ['20%', '20%']
        },
        series: [
          // 第一组数据
          {
            name: this.dataObj.legend[0],
            type: 'custom',
            color: this.dataObj.yData1Obj.colorTop[0],
            renderItem: (params, api) => {
              // console.log('RRRRRR', api, api.value(0), api.value(1))
              const location = api.coord([api.value(0), api.value(1)])
              // console.log('第一组数据-----', api.value(0), api.value(1), location[0], location[1])
              // console.log('第一组数据-----xAxisPoint', api.coord([api.value(0), 0]))
              var color = this.dataObj.yData1Obj.yData[params.dataIndex] == 0 ? 'transparent' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: this.dataObj.yData1Obj.colorTop[0] },
                { offset: 0.8, color: this.dataObj.yData1Obj.colorTop[1] }
              ])
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                      fill: color = this.dataObj.yData1Obj.yData[params.dataIndex] == 0 ? 'transparent' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: this.dataObj.yData1Obj.colorLeft[0] },
                        { offset: 0.8, color: this.dataObj.yData1Obj.colorLeft[1] }
                      ]),
                      stroke: this.dataObj.yData1Obj.yData[params.dataIndex] == 0 ? 'transparent' : '#999',
                      lineWidth: 1
                    }
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                      fill: color = this.dataObj.yData1Obj.yData[params.dataIndex] == 0 ? 'transparent' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: this.dataObj.yData1Obj.colorRight[0] },
                        { offset: 0.8, color: this.dataObj.yData1Obj.colorRight[1] }
                      ]),
                      stroke: this.dataObj.yData1Obj.yData[params.dataIndex] == 0 ? 'transparent' : '#999',
                      lineWidth: 1
                    }
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                      fill: color = this.dataObj.yData1Obj.yData[params.dataIndex] == 0 ? 'transparent' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: this.dataObj.yData1Obj.colorTop[0] },
                        { offset: 1, color: this.dataObj.yData1Obj.colorTop[1] }
                      ]),
                      stroke: this.dataObj.yData1Obj.yData[params.dataIndex] == 0 ? 'transparent' : '#999',
                      lineWidth: 1
                    }
                  }
                ]
              }
            },
            data: this.dataObj.yData1Obj.yData
          },
          // 第二组数据
          {
            name: this.dataObj.legend[1],
            type: 'custom',
            color: this.dataObj.yData2Obj.colorTop[0],
            renderItem: (params, api) => {
              // console.log('第二组数据--------', params, api, params.dataIndex, api.value(1) - this.dataObj.yData1Obj.yData[params.dataIndex])
              const location = api.coord([api.value(0), api.value(1)])
              // console.log('location-----', location)
              // console.log('第二组数据-----', api.value(0), api.value(1), location[0], location[1])
              // console.log('第二组数据-----xAxisPoint', api.coord([api.value(0), this.dataObj.yData1Obj.yData[params.dataIndex]]))
              var color = this.dataObj.yData2Obj.yData[params.dataIndex] == 0 ? 'transparent' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: this.dataObj.yData2Obj.colorTop[0] },
                { offset: 0.8, color: this.dataObj.yData2Obj.colorTop[1] }
              ])
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: this.dataObj.yData1Obj.yData[params.dataIndex] == 0 ? api.coord([api.value(0), this.dataObj.yData1Obj.yData[params.dataIndex]]) :
                        api.coord([api.value(0), this.dataObj.yData1Obj.yData[params.dataIndex] + 1])
                    },
                    style: {
                      fill: color = this.dataObj.yData2Obj.yData[params.dataIndex] == 0 ? 'transparent' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: this.dataObj.yData2Obj.colorLeft[0] },
                        { offset: 0.8, color: this.dataObj.yData2Obj.colorLeft[1] }
                      ]),
                      // opacity: 0.5,
                      stroke: this.dataObj.yData2Obj.yData[params.dataIndex] == 0 ? 'transparent' : '#999',
                      lineWidth: 1
                    },
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: this.dataObj.yData1Obj.yData[params.dataIndex] == 0 ? api.coord([api.value(0), this.dataObj.yData1Obj.yData[params.dataIndex]]) :
                        api.coord([api.value(0), this.dataObj.yData1Obj.yData[params.dataIndex] + 1])
                    },
                    style: {
                      fill: color = this.dataObj.yData2Obj.yData[params.dataIndex] == 0 ? 'transparent' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: this.dataObj.yData2Obj.colorRight[0] },
                        { offset: 0.8, color: this.dataObj.yData2Obj.colorRight[1] }
                      ]),
                      stroke: this.dataObj.yData2Obj.yData[params.dataIndex] == 0 ? 'transparent' : '#999',
                      lineWidth: 1
                    }
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: this.dataObj.yData1Obj.yData[params.dataIndex] == 0 ? api.coord([api.value(0), this.dataObj.yData1Obj.yData[params.dataIndex]]) :
                        api.coord([api.value(0), this.dataObj.yData1Obj.yData[params.dataIndex] + 1])
                    },
                    style: {
                      fill: color = this.dataObj.yData2Obj.yData[params.dataIndex] == 0 ? 'transparent' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: this.dataObj.yData2Obj.colorTop[0] },
                        { offset: 1, color: this.dataObj.yData2Obj.colorTop[1] }
                      ]),
                      stroke: this.dataObj.yData2Obj.yData[params.dataIndex] == 0 ? 'transparent' : '#999',
                      lineWidth: 1
                    }
                  }
                ],
              }
            },
            data: this.total12
          },
          // 第三组数据
          {
            name: this.dataObj.legend[2],
            type: 'custom',
            color: this.dataObj.yData3Obj.colorTop[0],
            renderItem: (params, api) => {
              // console.log('第二组数据--------', params, api, params.dataIndex, api.value(1) - this.dataObj.yData1Obj.yData[params.dataIndex])
              const location = api.coord([api.value(0), api.value(1)])
              // console.log('location-----', location)
              // console.log('第二组数据-----', api.value(0), api.value(1), location[0], location[1])
              // console.log('第二组数据-----xAxisPoint', api.coord([api.value(0), this.dataObj.yData1Obj.yData[params.dataIndex]]))
              var color = this.dataObj.yData3Obj.yData[params.dataIndex] == 0 ? 'transparent' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: this.dataObj.yData3Obj.colorTop[0] },
                { offset: 0.8, color: this.dataObj.yData3Obj.colorTop[0] }
              ])
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: this.total12[params.dataIndex] == 0 ? api.coord([api.value(0), this.total12[params.dataIndex]]) :
                        api.coord([api.value(0), this.total12[params.dataIndex] + 1])
                    },
                    style: {
                      fill: color = this.dataObj.yData3Obj.yData[params.dataIndex] == 0 ? 'transparent' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: this.dataObj.yData3Obj.colorLeft[0] },
                        { offset: 0.8, color: this.dataObj.yData3Obj.colorLeft[1] }
                      ]),
                      stroke: this.dataObj.yData3Obj.yData[params.dataIndex] == 0 ? 'transparent' : '#999',
                      lineWidth: 1
                    }
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: this.total12[params.dataIndex] == 0 ? api.coord([api.value(0), this.total12[params.dataIndex]]) :
                        api.coord([api.value(0), this.total12[params.dataIndex] + 1])
                    },
                    style: {
                      fill: color = this.dataObj.yData3Obj.yData[params.dataIndex] == 0 ? 'transparent' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: this.dataObj.yData3Obj.colorRight[0] },
                        { offset: 0.8, color: this.dataObj.yData3Obj.colorRight[1] }
                      ]),
                      stroke: this.dataObj.yData3Obj.yData[params.dataIndex] == 0 ? 'transparent' : '#999',
                      lineWidth: 1
                    }
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: this.total12[params.dataIndex] == 0 ? api.coord([api.value(0), this.total12[params.dataIndex]]) :
                        api.coord([api.value(0), this.total12[params.dataIndex] + 1])
                    },
                    style: {
                      fill: color = this.dataObj.yData3Obj.yData[params.dataIndex] == 0 ? 'transparent' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: this.dataObj.yData3Obj.colorTop[0] },
                        { offset: 1, color: this.dataObj.yData3Obj.colorTop[1] }
                      ]),
                      stroke: this.dataObj.yData3Obj.yData[params.dataIndex] == 0 ? 'transparent' : '#999',
                      lineWidth: 1
                    }
                  }
                ]
              }
            },
            data: this.total123
          },
        ]
      }
      myChart.setOption(option);
    }
  }
}

</script>
<style scoped>
.echarts {
  width: 95%;
  height: 450px;
  border: 1px solid black;
  margin: 10px auto 20px;
}
</style>